<script setup lang="ts">
defineOptions({
  name: "NIKE"
});
import RingChart from "./components/RingChart.vue";
import CapsuleChart from "./components/CapsuleChart.vue";
import FlylineChart from "./components/FlylineChart.vue";
import ScrollRanking from "./components/ScrollRanking.vue";
import ScrollBoard from "./components/ScrollBoard.vue";
import BarChart from "./components/barChart.vue";
</script>

<template>
  <dv-full-screen-container
    style="
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color: #121c2b;
    "
  >
    <div class="container">
      <div class="row">
        <div class="cell">
          <dv-border-box-12><RingChart /></dv-border-box-12>
        </div>
        <div class="cell">
          <dv-border-box-12><CapsuleChart /></dv-border-box-12>
        </div>
        <div class="cell">
          <dv-border-box-12><FlylineChart /></dv-border-box-12>
        </div>
      </div>
      <div class="row">
        <div class="cell">
          <dv-border-box-12><ScrollRanking /></dv-border-box-12>
        </div>
        <div class="cell">
          <dv-border-box-12><BarChart /></dv-border-box-12>
        </div>
        <div class="cell">
          <dv-border-box-12><ScrollBoard /></dv-border-box-12>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.row {
  display: flex;
  flex: 1;
  width: 100%;
  min-height: 0;
  margin-bottom: 10px;
  color: #fff;

  &:last-child {
    margin-bottom: 0;
  }

  .cell {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0 5px;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }

    :deep(.dv-border-box-12) {
      width: 100%;
      height: 100%;
    }
  }
}

@media screen and (width <= 768px) {
  .row {
    flex-direction: column;
    margin-bottom: 10px;

    .cell {
      min-height: 200px;
      margin: 5px 0;

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
